<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Read Image</title>
  <style>
    #dropBox {
      margin: 15px;
      width: 250px;
      height: 150px;
      border: 5px solid gray;
      border-radius: 8px;
      background: lightyellow;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }  
    input{
      display: none;
    } 
    button{
      width: 80px;
      height: 30px;
      margin-left: 20px;
    }
  </style>
</head>
<body>
    <div id="dropBox">
    </div>
    <input type="file">
    <button>上传</button>
</body>
</html>
  <script>
    var dropBox = document.getElementById("dropBox");
    dropBox.ondragenter=function(e){
        //取消事件传播及默认行为
        e.stopPropagation();
        e.preventDefault();
    }
    dropBox.ondragover=function(e){
        //取消事件传播及默认行为
        e.stopPropagation();
        e.preventDefault();
    }

    dropBox.ondrop=function(e) {
      //取消事件传播及默认行为
      e.stopPropagation();
      e.preventDefault();
      
      var data = e.dataTransfer;
      var files = data.files;

     console.log(URL.createObjectURL(files[0]));
     var src=URL.createObjectURL(files[0]);
     dropBox.style.backgroundImage="url('" + src + "')";
    }
    
    var input = document.querySelector('input');
    var button = document.querySelector('button');

    button.onclick = function(){
      this.previousElementSibling.click();
    }
    input.onchange = function(){
      var file=this.files[0]
       if(file.type.startsWith('image')){
            // 是图片
            // URL.createObjectURL(file) 根据传入的参数创建一个指向该文件的URL(文件的地址)
            var src = URL.createObjectURL(file);
            dropBox.style.backgroundImage="url('" + src + "')";
        }else{
            //是其他的文件
            alert('只能上传图片');
        }
    }
    






 
    // function processFiles(files) {
    //   var file = files[0];
    //   //创建FileReader
    //   var reader = new FileReader();
    //   //告诉它在准备好数据之后做什么
    //   reader.onload = function (e) {
    //     //使用图像URL来绘制dropBox的背景
    //     dropBox.style.backgroundImage = "url('" + e.target.result + "')";
    //   };
    //   //读取图片
    //   reader.readAsDataURL(file);
    // }
 
  </script>
